<template>
  <!-- 阴影折线图 -->
  <div style="height:300px;width:100%;overflow: hidden;">
    <Row
      v-if="option.series.length==0"
      style="height:300px;background: white;"
      type="flex"
      align="middle"
      justify="center"
    >
      <img src="~@/assets/img/efficiencyAnalysis/zwsj.png" height="50%" />
    </Row>
    <div ref="main" style="overflow: hidden;height:300px;"></div>
  </div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  components: {},
  data() {
    return {
      option: {
        noDataLoadingOption: {
          text: "暂无数据",
          effect: "bubble",
          effectOption: {
            effect: {
              n: 0
            }
          }
        },
        color: Style.color,
        textStyle: {
          //全局文字颜色
          // color: "#add8ff"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          ...Style.grid
        },
        // toolbox: {
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: "none"
        //     },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          //底部网格样式
          axisLine: {
            lineStyle: {
              // color: "#104b80"
            }
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          //左边网格样式
          axisLine: {
            show: false,
            lineStyle: {
              // color: "#104b80"
            }
          },
          //内部网格样式
          splitLine: {
            show: true,
            lineStyle: {
              // color: "#104b80",
              width: 1,
              type: "solid"
            }
          }
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],
        series: [
          {
            name: "电压不平衡单项分析",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(155, 198, 241)"
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(125, 182, 236)"
                },
                {
                  offset: 1,
                  color: "rgb(245, 249, 253)"
                }
              ])
            },
            data: ["20", "50", "30", "10", "-10", "60", "120"]
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    let myChart = this.$echarts.init(this.$refs.main);
    myChart.setOption(this.option);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>